<template>
    <view class="footer-wrap">
        <view class="leftContent">
            <view class="checkAllimg " :class="[isSelectdAll ? 'isSelectedClass' : '']" @click="selectAll"></view>
            <span class="allchecktxt">全选</span>
            <!-- 计算价格部分 -->
            <view class="choosenum">
                <view>
                    <span>合计:</span>
                    <span class="symbol">￥</span>
                    <span class="sale_amount">{{ billingInfo.payAmount | toFixed(2) }}</span>
                </view>
                <view class="discount-wrap">
                    <view class="discount" v-if="billingInfo.discount > 0">已减：¥{{ billingInfo.discount | toFixed(2) }}</view>
                    <view class="coupon-detail" v-if="couponList.length > 0 && billingInfo.hadSelectPicCount > 0" @click="viewCouponDetail">优惠明细</view>
                </view>
            </view>
        </view>
        <view class="rightContent">
            <view class="payBtn" :class="[billingInfo.hadSelectPicCount > 0 ? 'isSelectedBtn' : '']" @click="goPay">去结算({{ billingInfo.hadSelectPicCount }})</view>
        </view>
    </view>
</template>
<script>
export default {
    name: '',
    data() {
        return {
            isSelectdAll: false
        };
    },
    props: {
        billingInfo: {
            type: Object,
            require: true
        },
        selectAllStatus: {
            type: Boolean,
            default: false
        },
        couponList: {
            type: Array,
            require: true
        }
    },
    computed: {},
    mounted() {},
    created() {},
    methods: {
        selectAll() {
            this.isSelectdAll = !this.isSelectdAll;
            this.$emit('getSelectAllStatus', this.isSelectdAll);
        },
        // 查看优惠详情
        viewCouponDetail() {
            this.$emit('viewCouponDetail');
        },
        // 监听父级是否全选的状态变化
        onSelectAllStatus(isSelectdAll) {
            this.isSelectdAll = isSelectdAll;
        },
        // 去支付
        goPay() {
            if (this.billingInfo.hadSelectPicCount > 0) {
                let billingInfo = JSON.parse(JSON.stringify(this.billingInfo));
                this.$emit('gotoPayPage', billingInfo);
            }
        }
    },
    components: {},
    watch: {
        selectAllStatus: {
            handler(newVal, oldVal) {
                this.onSelectAllStatus(newVal);
            },
            immediate: true
        }
    }
};
</script>
<style lang="scss" scoped="scoped">
.footer-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 98rpx;
    box-sizing: border-box;
    color: #262832;
    border-top: 1px solid #e8ebf2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    background: #fff;
    z-index: 100;
    .leftContent {
        display: flex;
        align-items: center;
        height: 98rpx;
        .checkAllimg {
            width: 34rpx;
            height: 34rpx;
            background: url(@/pages/minePages/static/pay/null.png) no-repeat;
            background-size: cover;
        }

        .isSelectedClass {
            width: 34rpx;
            height: 34rpx;
            background: url(@/pages/minePages/static/pay/ok.png) no-repeat;
            background-size: cover;
        }

        .allchecktxt {
            margin-left: 10rpx;
        }

        .choosenum {
            margin-left: 38rpx;
            span {
                line-height: 26rpx;
            }
            .symbol {
                font-size: 24rpx;
                line-height: 24rpx;
                color: #ff4d4d;
            }
            .sale_amount {
                color: #ff4d4d;
                font-weight: bold;
                font-size: 34rpx;
                line-height: 34rpx;
            }
            .discount-wrap {
                display: flex;
                align-items: center;
                .discount {
                    font-size: 23rpx;
                    line-height: 23rpx;
                    color: #bfbfbf;
                }
                .coupon-detail {
                    width: 94rpx;
                    height: 30rpx;
                    font-size: 18rpx;
                    line-height: 30rpx;
                    background-color: #f5f5f5;
                    border-radius: 15rpx;
                    text-align: center;
                    margin-left: 16rpx;
                }
            }
        }
    }

    .rightContent {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 98rpx;
        .discount {
            color: #bfbfbf;
            margin-left: 10rpx;
            text-decoration: line-through;
        }

        .payBtn {
            height: 66rpx;
            line-height: 66rpx;
            text-align: center;
            font-size: 30rpx;
            color: #ffffff;
            background: #c3c3c3;
            border-radius: 10rpx;
            margin-left: 30rpx;
            width: 210rpx;
            text-align: center;
        }

        .isSelectedBtn {
            height: 66rpx;
            line-height: 66rpx;
            text-align: center;
            font-size: 30rpx;
            color: #ffffff;
            border-radius: 10rpx;
            margin-left: 30rpx;
            width: 210rpx;
            text-align: center;
            background-image: linear-gradient(45deg, #47c649 0%, #5ad25c 100%);
        }
    }
}
</style>
